<template>
	<view v-if="loadSuccess" class="container">
		<!-- 自定义导航 -->
		<st-custom-header title="订单支付"></st-custom-header>
		
		<!-- 背景块 -->
		<view class="header-bg-block"></view>
		
		<view class="pay-info">
			<view class="total-bar">
				<view class="hd">应付金额</view>
				<view class="fd"><text class="symbol">{{globalExchangeRate}}</text>{{orderInfo.payprice}}</view>
			</view>
			<view class="pay-info-item">
				<view class="hd">产品名称：</view>
				<view class="bd" v-if="orderInfo.productname">
					{{orderInfo.productname}}
					<text v-if="orderInfo.suit_name">({{orderInfo.suit_name}})</text>
				</view>
			</view>
			<view class="pay-info-item">
				<view class="hd">产品编号：</view>
				<view class="bd">{{orderInfo.series_number}}</view>
			</view>
			<view class="pay-info-item">
				<view class="hd">订单号：</view>
				<view class="bd">{{orderInfo.ordersn}}</view>
			</view>
			<view class="pay-info-item">
				<view class="hd">下单时间：</view>
				<view class="bd" v-if="orderInfo.addtime">{{ get_date_format(orderInfo.addtime) }}</view>
			</view>
		</view>

		<radio-group name="paytype" @change="paywayChange">
			<view class="pay-way  mb-20">
				<block v-for="(item,index) in online" :key="index">
					<view v-if="payway.includes(item.pinyin)" class="pay-way-item">
						<view class="hd">
							<image :src="paywayConf[item.pinyin].icon" mode="aspectFit"></image>
						</view>
						<view class="bd">
							<view class="pay-type">
								{{item.name}}<text class="surplus" v-if="item.pinyin == 'wallet'">({{globalExchangeRate}}{{walletInfo.total_balance}})</text>
							</view>
							<view class="pay-radio">
								<label class="radio">
									<radio class="radio-size-base" color="#2dbb55" name="paytype" :value="item.pinyin" /><text></text>
								</label>
							</view>
						</view>
					</view>
				</block>
			</view>
		</radio-group>
		
		<!-- 底部操作按钮 -->
		<footer-fixed-bar :isShadow="false" :isBackground="false">
			<view class="footer-alone-btn-default " @click="payorder">
				<view class="text" :class="submitStatus && payurl?'':'btn-disabled'">立即支付</view>
			</view>
		</footer-fixed-bar>
		
	</view>
</template>

<script>
	import footerFixedBar from "@/components/footer-fixed-bar.vue"
	import {getOrderDetailPage} from '@/utils/toPath.js'
	import walletPay from '@/utils/pay.wallet.js'
	import checkOrderPay from '@/utils/mp_checkOrderPay.js'
	import {
		isWxClient,
		get_date_format,
		check_app_install
	} from "@/utils/utils.js";
	import weixinPay from '@/utils/pay.weixin.js'
	import icbcPay from '@/utils/pay.weixin.icbc.js'
	export default {
		components: {
			footerFixedBar
		},
		data() {
			return {
				loadSuccess:false, // 支付数据加载完成显示页面
				ordersn:'',
				orderInfo: {},//订单信息
				walletInfo:{},//钱包信息
				online: [],
				submitStatus: false,
				payurl: '',
				payway: ['wxpay', 'wallet','icbcpay'], // 目前支持的微信支付方式,余额支付
				paywayConf: { // 目前支持的微信支付方式相关配置
					wxpay: {
						icon: 'https://static.member.stourweb.cn/uniapp/static/images/wechat_icon.png'
					},
					icbcpay: {
						icon: 'https://static.member.stourweb.cn/uniapp/static/images/icbc_icon.png' 
					},
					wallet: {
						icon: 'https://static.member.stourweb.cn/uniapp/static/images/recharge_icon.png' 
					}
					
				},
				
			}
		},
		onLoad(options) {
			// 检查是否是微信端
			this.isWxClient = isWxClient();
			
			//信息设置
			if (options.ordersn) {
				this.ordersn = options.ordersn;
			}
			
			if (this.ordersn) {
				this.getOrderDetail();
			} else {
				uni.showToast({
					title: '参数信息有误',
					icon: 'none'
				})
			}
		},
		methods: {
			
			// 获取订单支付信息详情
			async getOrderDetail() {
				let params = {
					method: 'api/v2/payment/index/index',
					ordersn: this.ordersn,
					comefrom: 'wxxcx',
					is_wx_client: this.isWxClient ? 1 : 0
				};
				uni.showLoading({
					title: '加载中...'
				})
				let res = await this.$http(params);
				uni.hideLoading();
				if (res.status) {
					
					 // 已支付
					if (res.data.is_payed == 1) {
						uni.redirectTo({
							url: `/pages/order/paysuccess?ordersn=${this.ordersn}&orderid=${res.data.id}`
						})
						return;
					}
					
					this.loadSuccess = true
									
					// 未支付
					this.submitStatus = true;
					this.orderInfo = res.data.info;
					this.online = res.data.pay_method.online;
					this.online.map(item => {
						// 如果有'wallet',则获取钱包信息
						if(item.pinyin == 'wallet'){
							this.getWalletIndex();
						}
					})
				} else {
					this.errPath(res);
				}
			},
			
			// 获取钱包余额
			async getWalletIndex() {
				let params = {
					method: 'api/v2/member/bag/wallet_index'
				}
				let res = await this.$http(params);
				if(res.status){
					this.walletInfo = res.data;
				}
			},
			
			// 获取日期格式
			get_date_format(time) {
				return get_date_format(time, "yyyy-MM-dd hh:mm:ss");
			},
			
			// 切换支付方式
			paywayChange(e) {
				this.payurl = e.detail.value;
			},
			
			//立即支付
			payorder() {
				let _this = this
				let orderInfo = this.orderInfo;
				
				// 钱包抵扣
				if (this.payurl == 'wallet') {
					
					if(parseFloat(this.walletInfo.total_balance) < parseFloat(orderInfo.payprice)){
						uni.showToast({
							icon: 'none',
							title:'余额不足'
						})
						return
					}
					
					uni.showModal({
						title: '',
						content: '确定支付￥' + this.orderInfo.payprice + '?',
						showCancel: true,
						confirmColor: '#333333',
						success: res => {
							if (res.confirm) {
								walletPay(orderInfo)
							}
						}
					});
				}
				
				//微信支付
				if (this.payurl == 'wxpay') {
					weixinPay(orderInfo,function(){
						checkOrderPay(orderInfo.id, orderInfo.ordersn, 10)
					},function(){
						_this.getOrderDetail()
						_this.getWalletIndex()
					});
				}
				//工行微信支付
				if (this.payurl == 'icbcpay') {
					icbcPay(orderInfo,function(){
						checkOrderPay(orderInfo.id, orderInfo.ordersn, 10)
					},function(){
						_this.getOrderDetail()
						_this.getWalletIndex()
					});
				}
			},
					
			// 订单状态错误页面跳转
			errPath(errData) {
				let data = errData.data ? errData.data : '',
					errmsg = errData.msg,
					path = `/pages/order/payerr?errmsg=${errmsg}`;
				uni.redirectTo({
					url: path
				});
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #f6f6f6
	}
	.container {
		position: relative;
	}
	
	.header-bg-block{
		position: absolute;
		width: 100%;
		height: 260rpx;
		background: linear-gradient(to right, #5BE181 0%, #11C586 100%);
		&:after{
			content: "";
			display: block;
			width: 100%;
			height: 100%;
			background: linear-gradient(to bottom, transparent, #f6f6f6);
		}
	}

	.mb-20 {
		margin-bottom: 20rpx !important;
	}

	.iconfont {
		margin-left: 10rpx;
		color: $uni-color-primary;
		vertical-align: middle;
	}

	.pay-info {
		margin: 20rpx 24rpx;
		background: $uni-bg-color;
		border-radius: 20rpx;
		padding: 24rpx;
		position: relative;
		display: block;
		z-index: 1;
		font-family: Arial, Helvetica, sans-serif;
		&::after{
			content: "";
			display: block;
			height: 100rpx;
			position: absolute;
			top: 1px;
			left: 1px;
			right: 1px;
			z-index: -1;
			border-radius: 20rpx;
			background: linear-gradient(to bottom, #DEFCE6, transparent);
		}
		
		.total-bar{
			color: #FF4A50;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 12rpx 0 20rpx;
			font-weight: bold;
			font-size: 48rpx;
			.hd{
				color: #222;
			}
			.fd{
				color: #FF4A50;
				.symbol{
					font-size: 28rpx
				}
			}
		}

		.pay-info-item {
			display: flex;
			font-size: $uni-font-size-base;
			padding: 16rpx 0;

			.hd {
				color: #222;
				width: 144rpx;
				flex: 0 0 auto;
			}

			.bd {
				color: #999;
				word-break: break-all;
				flex: 1 1 auto;
			}
		}
	}

	.pay-way {
		margin: 0 $uni-spacing-col-lg;
		border-radius: 8rpx;

		.pay-way-item {
			display: flex;
			align-items: center;
			font-size: $uni-font-size-base;
			padding: 20rpx;
			margin-bottom: 20rpx;
			position: relative;
			border-radius: 20rpx;
			background: $uni-bg-color;

			&::after {
				content: '';
				display: block;
				width: calc(100% - 62rpx);
				background-color: $uni-border-color;
				height: 2rpx;
				transform: scale(1, 0.5);
				position: absolute;
				bottom: 0;
				left: 62rpx;
			}

			&:last-child::after {
				content: '';
				display: none;
			}

			.hd {
				width: 62rpx;
				flex: 0 0 auto;

				image {
					width: 48rpx;
					height: 36rpx;
				}
			}

			.bd {
				flex: 1 1 auto;
				color: #000000;
				font-size: $uni-font-size-base;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.surplus{
					font-size: $uni-font-size-mini;
					color: $uni-text-color-primary;
					font-family: Arial, Helvetica, sans-serif;
					margin-left: 10rpx;
				}
			}
		}
	}

	// 底部独立按钮
	.footer-alone-btn-default {
		text-align: center;
		padding: 0 24rpx 24rpx;
		background: $uni-bg-color-grey;
	
		.text {
			padding: 24rpx 0;
			color: $uni-text-color-inverse;
			border-radius: 200rpx;
			font-size: $uni-font-size-lg;
			background: linear-gradient(to right, #FF8A2A, #FF644E);
		}
	
		.btn-disabled {
			background: #ccc;
		}
	}
</style>
